<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #app {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-areas: "head head head" "nav asid article" "nav . article";
            grid-template-columns: 1fr 1fr 3fr;
            grid-template-rows: 50px 1fr 1fr;
        }
        
        #app>.item {
            background: lawngreen;
            border: 1px solid darkcyan;
        }
        
        #app>.item:nth-child(1),
        #app>.item:nth-child(2),
        #app>.item:nth-child(3) {
            grid-area: head
        }
        
        #app>.item:nth-child(4),
        #app>.item:nth-child(5),
        #app>.item:nth-child(6) {
            grid-area: nav
        }
        
        #app>.item:nth-child(7),
        #app>.item:nth-child(8),
        #app>.item:nth-child(9) {
            grid-area: article
        }
        
        #app2 {
            width: 300px;
            height: 300px;
            display: grid;
            /* ===================================
                [a-*] [c-*] 是给网格的线命名
            ==================================== */
            grid-template-rows: [a1] 30% [a2] 30% [a3] 30% [a4];
            grid-template-columns: [c1] 30% [c2] 30% [c3] 30% [c4];
            grid-auto-rows: 30%;
            grid-auto-columns: 30%;
            place-content: start center;
        }
        
        #app2>.item {
            background: darkorange;
            border: 1px solid darkviolet;
            place-items: center;
            display: grid;
        }
        
        #app2>.item:nth-child(1) {
            grid-column-start: c1;
            grid-column-end: c3;
            grid-row-start: a2;
            grid-row-end: a4
        }
        
        #app,
        #app2,
        #app3,
        #app4 {
            float: left;
            margin: 15px;
        }
        
        #app3 {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3, 30%);
            grid-template-rows: repeat(3, 30%);
            place-content: start center;
            grid-auto-columns: 30%;
            grid-auto-rows: 30%;
        }
        
        #app3>.item {
            display: grid;
            border: darkviolet 1px solid;
            background: deeppink;
            place-items: center;
        }
        
        #app3>.item:nth-child(1) {
            /* ===============================================
                grid-column : 
                    grid-column-start  /  grid-column-end
                
                grid-row:
                    grid-row-start  /  grid-row-end
            =============================================== */
            grid-column: 1 /3;
            grid-row: 2 / 4
        }
        
        #app4 {
            display: grid;
            width: 300px;
            height: 300px;
            grid-template-columns: repeat(3, 30%);
            grid-template-rows: repeat(3, 30%);
            place-content: start center;
            grid-auto-rows: 30%;
            grid-auto-columns: 30%;
        }
        
        #app4>.item {
            background: khaki;
            border: 1px solid deeppink;
            display: grid;
            place-items: center;
        }
        
        #app4>.item:nth-child(1) {
            grid-row: 2 / span 2;
            grid-column: 2 / span 2
        }
        
        #app5 {
            clear: left;
            /* margin-top: 50px; */
            display: grid;
            width: 300px;
            height: 300px;
            grid-template-areas: "a1 a2 a3" "b1 b2 b3" "c1 c2 c3";
            grid-template-columns: repeat(3, 30%);
            grid-template-rows: repeat(3, 30%);
            place-content: start center;
            grid-auto-rows: 30%;
            grid-auto-columns: 30%;
        }
        
        #app5>.item {
            background: lightgreen;
            border: 1px solid aqua;
            display: grid;
            place-items: center;
        }
        
        #app5>.item:nth-child(1) {
            /* ===================================================================================
                grid-area属性还可用作
                    grid-row-start、
                    grid-column-start、
                    grid-row-end、
                    grid-column-end
                    的合并简写形式，直接指定项目的位置。
                
                    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
                
                .item-1 {
                    grid-area: 1 / 1 / 3 / 3;
                }
            ====================================================================================== */
            grid-area: b2
        }
        
        #app6 {
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3, 30%);
            grid-template-rows: repeat(3, 30%);
        }
        
        #app6>.item {
            display: grid;
            border: 1px solid darkorchid;
            background: dodgerblue;
        }
        
        #app6>.item:nth-child(1) {
            /* ========================================================
                justify-self属性设置单元格内容的水平位置（左中右），
                跟justify-items属性的用法完全一致，但只作用于单个项目。

                align-self属性设置单元格内容的垂直位置（上中下），
                跟align-items属性的用法完全一致，也是只作用于单个项目。

                place-self : <justify-self> <align-self> 
            ========================================================== */
            justify-self: center;
            align-self: center;
        }
        
        #app6>.item:nth-child(2) {
            place-items: center;
        }
        
        #app6>.item:nth-child(3) {
            /*========================================
                place-items:作用于 元素 中的内容
                place-self :作用于 元素 本身
            ========================================== */
            place-self: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="item">11111</div>
        <div class="item">22222</div>
        <div class="item">33333</div>
        <div class="item">44444</div>
        <div class="item">55555</div>
        <div class="item">66666</div>
        <div class="item">77777</div>
        <div class="item">88888</div>
        <div class="item">99999</div>
    </div>

    <div id="app2">
        <div class="item">11111</div>
        <div class="item">22222</div>
        <div class="item">33333</div>
        <div class="item">44444</div>
        <div class="item">55555</div>
        <div class="item">66666</div>
        <div class="item">77777</div>
        <div class="item">88888</div>
        <div class="item">99999</div>
    </div>

    <div id="app3">
        <div class="item">11111</div>
        <div class="item">22222</div>
        <div class="item">33333</div>
        <div class="item">44444</div>
        <div class="item">55555</div>
        <div class="item">66666</div>
        <div class="item">77777</div>
        <div class="item">88888</div>
        <div class="item">99999</div>
    </div>

    <div id="app4">
        <div class="item">11111</div>
        <div class="item">22222</div>
        <div class="item">33333</div>
        <div class="item">44444</div>
        <div class="item">55555</div>
        <div class="item">66666</div>
        <div class="item">77777</div>
        <div class="item">88888</div>
        <div class="item">99999</div>
    </div>

    <div id="app5">
        <div class="item">11111</div>
        <div class="item">22222</div>
        <div class="item">33333</div>
        <div class="item">44444</div>
        <div class="item">55555</div>
        <div class="item">66666</div>
        <div class="item">77777</div>
        <div class="item">88888</div>
        <div class="item">99999</div>
    </div>

    <div id="app6">
        <div class="item">11111</div>
        <div class="item">22222</div>
        <div class="item">33333</div>
        <div class="item">44444</div>
        <div class="item">55555</div>
        <div class="item">66666</div>
        <div class="item">77777</div>
        <div class="item">88888</div>
        <div class="item">99999</div>
    </div>
</body>

</html>